<!DOCTYPE html>
{% load i18n %}
<html>
<head>
    <meta charset="utf-8">
    <title>{% trans "Ansible UI Platform" %}</title>
    <link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="/static/ext/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/portal.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="/static/ext/js/html5.js"></script>
    <![endif]-->

    <style type="text/css">
 /*       body {
            padding-top: 100px;
        }
*/
      html, body {
        background-color: #eee;
        background: transparent url("/static/img/bg-login.png") repeat 50% ;
      }
      body {
        padding-top: 100px; 
      }
      .container {
        width: 300px;
      }

      /* The white background content wrapper */
      .container > .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; 
        -webkit-border-radius: 10px 10px 10px 10px;
           -moz-border-radius: 10px 10px 10px 10px;
                border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      .login-form {
        margin-left: 65px;
      }
    
      legend {
        margin-right: -50px;
        font-weight: bold;
        color: #404040;
      }
    </style>
</head>

<body>
 <!--   <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="brand" href="/">{{ title }} </a>
            </div>
        </div>
    </div>
-->
    <div class="container">
      <div class="content">
        <div class="row">
            <div class="login-form">
                
                <form action="{{ action }}" method="post">
                    {% csrf_token %}
                    {% if login_errors %}
                        <div class="alert">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>ERROR!</strong>
                                Invalid username or password

                        </div>
                    {% endif %}
                    <img alt="Logo" class="login-logo" height="100" src="/static/img/login-logo.png" width="220" />
                    <div class="clearfix">
                            <input type="text" required="required" name="username"  id="inputUserName" placeholder={% trans "Username" %}>
                    </div>
                    <div class="clearfix">
                            <input type="password" required="required"  id="inputPassword" name="password" placeholder={% trans "Password" %}>
                    </div>
                    <div class="control-group">
                            <input type="submit" class="btn btn-primary" value={% trans "Login" %} />
                    </div>

                    <input type="hidden" name="next" value="{{ next }}" />
                </form>
             </div>
        </div>
    </div>

    <script src="/static/ext/js/jquery/jquery-1.8.1.min.js"></script>
    <script src="/static/ext/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".alert").alert()
        })

    </script>
</body>
</html>
